<template>
  <div class="report-container">
    <h3 class="report-title">
      {{title}}
    </h3>
    <div class="report-box">
      <span class="report-unit">单位：人</span>
      <table>
        <thead>
        <tr>
          <th rowspan="3">单位</th>
          <th colspan="8">参保人员情况</th>
        </tr>
        <tr>
          <th rowspan="2">当期参保</th>
          <th rowspan="2">享受待遇</th>
          <th colspan="3">当期参保人员净增</th>
          <th colspan="2">目标进度</th>
          <th rowspan="2">排名</th>
        </tr>
        <tr>
          <th>期初人数</th>
          <th>当期净增</th>
          <th>当期增幅</th>
          <th>任务目标</th>
          <th>完成比例</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reportTotal">
          <td style="color: #fff;">汇总</td>
          <td>{{all.dangQiNum}}</td>
          <td>{{all.treatmentNum}}</td>
          <td>{{all.startNum}}</td>
          <td>{{all.addNum}}</td>
          <td>{{all.addRate}}</td>
          <td>{{all.newTask}}</td>
          <td>{{all.completionRatePer}}</td>
          <td></td>
        </tr>
        <tr v-for="(item,index) in reportData">
          <td>{{item.areaName}}</td>
          <td class="report-red">{{item.dangQiNum}}</td>
          <td>{{item.treatmentNum}}</td>
          <td>{{item.startNum}}</td>
          <td>{{item.addNum}}</td>
          <td>{{item.addRate}}</td>
          <td class="report-red edit-box" @mouseenter="showEdit(index)" @mouseleave="hideEdit">
            <input type="text" v-model="item.newTask" @blur="hideBlur($event,index,item.areaId)"
                   v-focus="editableIndex==index" v-blur="editableIndex==-1"
                   :readonly="editableIndex==index?false:true" maxlength="15" @keydown="onlyNum($event)">
            <svg @click="chooseEdit(index)" class="edit-btn" v-show="editIndex==index" viewBox="0 0 1024 1024">
              <path :d="svgPath.editBtn1"/>
              <path :d="svgPath.editBtn2"/>
            </svg>
          </td>
          <td>{{item.completionRate}}</td>
          <td>{{item.rank}}</td>
        </tr>
        </tbody>
      </table>
      <div class="report-remind">
        <!--<span class="report-remind-left">注：</span>-->
        <div class="report-remind-right">
          <!--<p v-for="(item,index) in reportRemind">-->
          <!--{{index + 1}}、{{item}}-->
          <!--</p>-->
          <p v-html="getConclusion()"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {svgPath, quitFullScreen, getRankingData, fifteenNum} from "../../../assets/js/utils";
  import {setEditNum} from '../../../api/api'
  export default {
    props: {
      siStatus: {
        type: Object,
        default: null
      },
      insuredType: {
        type: String,
        default: '1004'
      },
      queryYear: {
        type: String,
        default: ''
      },
      month: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        svgPath: svgPath,
        isEditable: true,
        reportRemind: [],
        editIndex: -1,
        editableIndex: -1,
        all: {},
        title: '',
        reportData: [],
        originData: '',
        reportNumber: '',
        conclusion: [],
      }
    },
    // 自定义指令
    directives: {
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      },
      blur: {
        update: function (el, {value}) {
          if (value) {
            el.blur()
          }
        }
      }
    },
    watch: {
      siStatus(newVal){
        this.all = newVal.data.all;
        this.reportData = newVal.data.reportData;
        this.originData = JSON.stringify(this.reportData);
        getRankingData(this, this.reportData);
        this.title = newVal.data.reportName;
        this.reportNumber = newVal.data.reportNumber;
        this.conclusion = newVal.data.conclusion;
      }
    },
    methods: {
      onlyNum(event){
        if (!(event.keyCode == 46) && !(event.keyCode == 8) && !(event.keyCode == 37) && !(event.keyCode == 39))
          if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))
            event.returnValue = false;
      },
      getConclusion() {
        let blank = '&nbsp;&nbsp;&nbsp;&nbsp;'
        let input = [this.all.newTask, this.queryYear, this.month, this.all.dangQiNum, this.all.completionRatePer]
        if (!this.all.newTask) {
          input[0] = blank
        }
        if (!this.queryYear) {
          input[1] = blank
        }
        if (!this.month) {
          input[2] = blank
        }
        if (!this.all.dangQiNum) {
          input[3] = blank
        }
        if (!this.all.completionRatePer) {
          input[4] = blank
        }
        return `注：省目标参保${input[0]}人；截至${input[1]}年${input[2]}月底，实际参保${input[3]}人，完成省下目标的${input[4]}。`
      },
      showEdit(index){
        this.editIndex = index;
      },
      hideEdit(){
        this.editIndex = -1;
        this.editableIndex = -1;
      },
      chooseEdit(index){
        this.editableIndex = index;
      },
      hideBlur(e, index, id) {
        let val = e.target.value;
        let oldVal = oldVal = JSON.parse(this.originData)[index].newTask;
        ;
        if (val == oldVal) {
          //判断新增任务是否修改
        } else if (val==''||fifteenNum(val)) {
          //发送
          let totalArr = [];
          this.reportData[index].newTask = val;
          this.reportData.map((item, index) => {
            totalArr.push(item.newTask);
          })
          this.all.newTask = totalArr.reduce((n, m) => Number(n) + Number(m));
          this.all.completionRatePer = Math.round((this.all.dangQiNum / this.all.newTask).toFixed(4) * 10000) / 100 + '%';
          this.originData = JSON.stringify(this.reportData);
          getRankingData(this)
          setEditNum('report/yearTargetSetUp', this.reportNumber, this.queryYear, id, val).then((rep) => {
            if (rep.code == 0) {
//              this.$emit('reloadData')
            }
          })
        } else {
          this.$message({
            message: '只允许输入正整数',
            center: true,
            type: 'info',
          });
          this.reportData = JSON.parse(this.originData);
          getRankingData(this)
        }
      }
    }
  };
</script>

<style scoped>
  @import "../../../assets/css/report.css";

  .report-box table th, .report-box table td {
    height: 32px;
    vertical-align: middle;
    border: solid 1px #bcbcbc;
    text-align: center;
    width: 11.1%;
  }

</style>
